<template>
    <div>
        <div class="kehu">
            <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
            <span>客户列表信息</span>
            <span @click="Xinzen">新增</span>
        </div>
       <van-search
  v-model="value"
  show-action
  
  placeholder="客户名称/联系方式"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">查询</div>
  </template>
</van-search>
<div class="zhiwu">
     <van-empty image="search" description="未查询到结果" v-if="Records.length==0"/>
    <ul v-else >
        <li v-for="(item,index) in Records" :key="index" >
            <div @click="Shitu(item.id)">
                  <p>客户名称 {{item.custName}}</p>
             <p>联系方式{{item.telephone}}</p>
              <p>公司名称{{item.company}}</p>
              <p>职务{{item.position}}</p>
            </div>
          
              <div class="toBox">
                  <span>新增拜访</span>
                  <span>拜访记录</span>
              </div>
        </li>
    </ul>
   
</div>
    </div>
</template>

<script>
import { GetCustDate} from "@/request/api"
export default {
    data () {
        return { 
       value:"",
     //客户列表信息
     Records:null
        }
    },
    methods:{
        Xinzen(){
            this.$router.push("/newcustomerinformation")
        },
        onSearch(){

        },
        onSearch(){
       GetCustDate({keyword:this.value,current:'1',size:'20'}).then((res)=>{
            this.Records=res.data.data.records
            console.log(66666666);
            console.log("搜索列表信息:",res);
        })
        },
        Shitu(val){
            console.log(val);
            this.$router.push(`/customerDetails/${val}`)
        }
    },
    created(){
        GetCustDate({keyword:"",current:'1',size:'60'}).then((res)=>{
            this.Records=res.data.data.records
            console.log("客户列表信息:",res);
        })
    }
}
</script>
 
<style lang = "less" scoped>
    .kehu{
        height: 1rem;
        background:#1f3399;
        font-size: .14rem;
        display: flex;
        color: white;
        line-height: 1rem;
        span{
            flex: 1;
            text-align: center;
        }
    }
    .zhiwu{
        font-size: .14rem;
        ul{
            /* margin: 0 .1rem; */
            li{
               background: #fff;
               margin-top: .15rem;
               padding: .15rem 0;
                p{
               padding: .02rem 0.1rem;
                height: .23rem;
                }
                .toBox{
                    height: .4rem;
                    line-height: .4rem;
                    text-align: right;
                    padding: .12rem;
                    span{
                     background: #003399;
    display: inline-block;
    margin-left: 0.2rem;
    width: .8rem;
    color: white;
    text-align: center;
    border-radius: .1rem;
                    }
                }
                
            }
        }
    }
</style>